{% load bootstrap3 %}

<!DOCTYPE html>
<html lang="en">
  <head>
  	<meta charset="utf-8">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<meta name="viewport" content="width=device-width, initial-scale=1">

  	<title>Learning Log</title>

  	{% bootstrap_css %}
  	{% bootstrap_javascript %}

  </head>

  <body>
  	
  	<!-- Static navbar -->
  	<nav class="navbar navbar-default navbar-static-top">
  		<div class="container">

  			<div class="navbar-header">
  				<button type="button" class="navbar-toggle collapsed"
  					data-toggle="collapse" data-target="#navbar"
  					aria-expanded="fasle" aria-controls="navbar">
  				</button>
  				<a class="navbar-brand" href="{% url 'learning_logs:index' %}">
  				Learning Log</a>			
  			</div>

  			<div class="navbar-toggle collapsed">
  				<ul class="nav navbar-nav">
  					<li><a href="{% url 'learning_logs:topics' %}">Topics</a></li>
  				</ul>
  			
  				<ul class="nav navbar-nav navbar-right">
  					{% if user.is_authenticated %}
  				 		<li><a>Hello, {{ user.username }}.</a></li>
  				  		<li><a href="{% url 'users:logout' %}">Log out</a></li>
  					{% else %}
  				  		<li><a href="{% url 'users:register' %}">Register</a></li>
  				 	 	<li><a href="{% url 'users:login' %}">Log in</a></li>
  					{% endif %}  				
  				</ul>
  			</div><!--/.nav-collapse -->
  		</div>
  		
  	</nav>

  	<div class="container">

  		<div class="page-header">
  			{% block header %}{% endblock header %}  			
  		</div>
   		<div>
  			{% block content %}{% endblock content %}  			
  		</div> 			
  		
  	</div><!-- /container-->
  </body>
 </html>
